<template>
  <div class="layout-wrap">
    <div class="container">
      <template v-for="(classBoxData, index) of classBoxArr">
        <div :key="index">
          <Title :text="classBoxData.name" />
          <div class="box-wrap">
            <BoxItem
              class="box-item"
              v-for="(boxItem, index) of classBoxData.boxList"
              :key="index"
              :boxItem="boxItem"
            />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Title from './components/title.vue'
import CsGoBoxModel from 'api/cs-go-box.js'
import BoxItem from './components/box-item.vue'
const csGoBoxModel = new CsGoBoxModel()
export default {
  data() {
    return {
      classBoxArr: []
    }
  },
  mounted() {
    this.getClassBox()
  },
  methods: {
    async getClassBox() {
      this.classBoxArr = await csGoBoxModel.getClassBox()
    }
  },
  components: {
    Title,
    BoxItem
  }
}
</script>

<style scoped lang="less">
.layout-wrap {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-image: url('https://21skins.com/static/media/csgo-bg-21skins.c5fef084.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container {
  padding: 16px;
  box-sizing: border-box;

  .box-wrap {
    display: flex;
    flex-wrap: wrap;

    .box-item {
      display: inline-block;
      flex: 0 0 25%;

      @media screen and (max-width: 960px) {
        & {
          flex: 0 0 33.333333333333%;
        }
      }

      @media screen and (max-width: 768px) {
        & {
          flex: 0 0 50%;
        }
      }
    }
  }
}
</style>

